<template>
  <div class="myConter">
    <div class="myHeader">
      <div class="txBox">
        <van-image round width="58px" height="58px" fit="cover" :src="userObj.headPortrait" />
      </div>
      <div class="infoBox">
        <p class="isName">{{ userObj.name }}</p>
        <p class="isZWinfo">
          <span>{{ userObj.account }}</span>
          <span style="padding: 0 10px">|</span>
          <span>{{ userObj.phone }}</span>
        </p>
      </div>
      <!-- <img class="message" @click="goMessage" src="../../assets/img/message.png" width="100%" alt="" /> -->
    </div>
    <van-cell is-link center v-for="(item, index) of list" :key="index" @click="toPage(item.page)" v-per="[item.page]">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <div class="flex align-items">
          <div class="img-100 m-r-10" style="height: 24px; width: 24px">
            <img :src="item.icon" />
          </div>
          <div class="col-1b1b font-14">
            {{ item.text }}
          </div>
        </div>
      </template>
    </van-cell>

    <van-cell is-link center v-for="(item, index) of listve" :key="index" @click="toPageVer()">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <div class="flex align-items">
          <div class="img-100 m-r-10" style="height: 24px; width: 24px">
            <img :src="item.icon" />
          </div>
          <div class="col-1b1b font-14">
            {{ item.text }}
          </div>
        </div>
      </template>
    </van-cell>

    <van-button block class="van-button buttonstyle" @click="logout" type="info" native-type="submit">
      退出登录
    </van-button>
  </div>
</template>

<script>
import { getValue, setValue, setObject } from '@/utils/auth'
import { Cell, NoticeBar, Search, Skeleton, Image, Button } from 'vant'
import { getHandle } from '@/api'
import { imgPath } from '@/filters'
export default {
  components: {
    [Cell.name]: Cell,
    [NoticeBar.name]: NoticeBar,
    [Search.name]: Search,
    [Skeleton.name]: Skeleton,
    [Image.name]: Image,
    [Button.name]: Button
  },
  data() {
    return {
      defaultAvatar: require('../../assets/img/defaultAvatar.png'),
      listve: [
        {
          text: '软件升级',
          page: '',
          icon: require('../../assets/img/personalIcon/rjsj.png')
        }
      ],
      list: [
        {
          text: '待缴费',
          page: 'exhibitionContractPersonal',
          icon: require('../../assets/img/personalIcon/htgl.png')
        },
        {
          text: '缴费记录',
          page: 'invoiceHistoryList',
          icon: require('../../assets/img/personalIcon/lsfpgl.png')
        }
      ],
      userObj: {
        name: '王五',
        account: 'wangw',
        phone: '19999999999'
      },
      ifShowSetting: true
    }
  },
  created() {
    this.$bridge.register('setView', data => {
      this.getUserInfo()
    })
    this.getUserInfo()
  },
  methods: {
    toPage(page) {
      this.$bridge.call(page)
    },

    toPageVer() {
      this.$bridge.call('versionCode')
    },
    logout() {
      this.$bridge.call('logout')
    },
    // 获取用户详情
    getUserInfo() {
      var url = ''
      if (getValue('roleInfos') == 'outsource_unit_sub_user') {
        //  url='/venues/api/userManage/outsourceUnitSubUser/queryDetail';

        this.userObj.name = getValue('name')
        this.ifShowSetting = false
      } else if (getValue('roleInfos') == 'outsource_unit') {
        // url='/venues/api/userManage/outsourceUnit/queryDetail';
        this.userObj.name = getValue('name')
        this.ifShowSetting = false
      } else {
        this.ifShowSetting = true
        url = '/venues/api/userManage/queryDetail'
        getHandle('/venues/api/userManage/queryDetail', {
          id: getValue('loginUserId')
        }).then(res => {
          if (res.body.data.headPortrait) {
            res.body.data.headPortrait = imgPath(res.body.data.headPortrait)
          } else {
            res.body.data.headPortrait = this.defaultAvatar
          }
          this.userObj = res.body.data
        })
      }
    },
    // 跳转设置页面
    goSettimg() {
      this.$bridge.call('accountSecurity')
    },
    // 跳转消息页面
    goMessage() {
      this.$bridge.call('goMessage')
    }
  }
}
</script>

<style lang="scss" scoped>
.buttonstyle {
  margin-top: 60px;
  width: 90%;
  left: 5%;
}
.content {
  border-top: 10px solid #eee;
}
.cell-none .van-icon {
  visibility: hidden;
}

.dateTime {
  line-height: 47px;
}
.time_box {
  padding: 8px 15px;
  font-size: 18px;
}
.time_box_right {
  padding: 8px 15px;
}
.line {
  height: 10px;
  background-color: #eeeeee;
}
.date_title {
  color: #2c82ff;
  vertical-align: middle;
}
.icon_down {
  padding-left: 7px;
  vertical-align: middle;
  color: #868686;
}
.date_btn {
  border: 1px solid #dddddd;
  border-radius: 5px;
}
.date_tabs {
  padding-bottom: 10px;
}
.title_wrap {
  display: flex;
  padding-top: 5px;
}
.day_title {
  color: #cccccc;
  background-color: transparent !important;
}
.day_item {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  margin: 3.5px 2.5px;
  background: #eeeeee;
  text-align: center;
  line-height: 32px;
}
.day_item:first-child {
  color: #cccccc;
  background: transparent;
}
#date_wrap > div {
  justify-content: center;
}
.legend {
  box-shadow: 0px 2px 8px 0px #cccccc;
  border-radius: 3px;
  margin: 7px 10px 0 10px;
}
.van-search__content {
  background-color: #eee;
  border-radius: 14px;
}
.legend_wrap {
  display: flex;
  justify-content: space-between;
  color: #1b1b1b;
}
.legend_item > div {
  margin-bottom: 10px;
}
.myHeader {
  width: 100%;
  height: 128px;
  margin-bottom: 10px;
  background: url('../../assets/img/personalIcon/grzxBG.png');
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding-left: 24px;
  position: relative;
}
.txBox {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
}
.txBox > img {
  width: 100%;
  height: 100%;
}
.infoBox {
  padding-left: 16px;
}
.isName {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
}
.isZWinfo {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  padding-top: 5px;
}
.setting,
.message {
  width: 20px;
  height: 20px;
}
.setting {
  position: absolute;
  top: 40px;
  right: 40px;
}
.message {
  position: absolute;
  top: 40px;
  right: 24px;
}
.myConter .van-cell {
  padding: 16px;
}
.myConter .van-cell::after {
  right: 0;
}
</style>
